import { FloatButton, Image, Tooltip } from "antd";
import dyewm from "../../assets/dy.jpg";
import { TencentQq, Tiktok, Wechat } from "@icon-park/react";
import wxewm from "../../assets/weixin.jpg";
import qqewm from "../../assets/qq.jpg";

export default function SuspenionButton() {
  return (
    <FloatButton.Group
      className={"hidden 2xl:flex"}
      shape="square"
      style={{ insetInlineEnd: 94, bottom: 110 }}
    >
      <Tooltip
        placement="left"
        title={<Image src={dyewm} />}
        color="#ffffff" // 设置 Tooltip 背景颜色为白色
      >
        <FloatButton icon={<Tiktok theme="outline" size="24" fill="#333" />} />
      </Tooltip>
      <Tooltip
        placement="left"
        title={<Image src={wxewm} />}
        color="#ffffff" // 设置 Tooltip 背景颜色为白色
      >
        <FloatButton
          icon={<Wechat theme="outline" size="24" fill="#07c160" />}
        />
      </Tooltip>
      <Tooltip
        placement="left"
        title={<Image src={qqewm} />}
        color="#ffffff" // 设置 Tooltip 背景颜色为白色
      >
        <FloatButton
          icon={<TencentQq theme="outline" size="24" fill="#010300" />}
        />
      </Tooltip>
      <FloatButton.BackTop visibilityHeight={0} />
    </FloatButton.Group>
  );
}
